<template>
  <el-card>
    <div class="head-container">
      <el-input
        v-model="searchText"
        placeholder="请输入"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>
    <div>
      <el-radio-group v-model="seltype" size="small">
        <el-radio-button label="river">水源地类型</el-radio-button>
        <el-radio-button label="region">行政区划</el-radio-button>
      </el-radio-group>
    </div>
    <div class="head-container">
      <el-tree
        :data="deptOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        show-checkbox
        default-expand-all
        ref="tree"
        node-key="id"
        highlight-current
        @node-click="handleNodeClick"
        @check-change="handleCheckChange"
        @check="handleCheck"
      />
    </div>
  </el-card>
</template>

<script>
import { getLakeSegmentTree, getRegionTree } from "@/api/dataResources/common";
import { getRiverTree, getDistrictTree } from "@/api/commonApi";
export default {
  name: "TreeSelect",
  data() {
    return {
      searchText: "",
      // 1. 默认显示行政区划：将seltype默认值设为"region"
      seltype: "region",
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    searchText(val) {
      this.$refs.tree?.filter(val);
    },
    seltype: {
      handler(newVal) {
        if (newVal === "river") {
          this.getSydTree();
        } else if (newVal === "region") {
          // 2. 加载行政区划树后，触发全选逻辑
          this.getRiverRegin().then(() => {
            this.selectAllNodes();
          });
        }
      },
      immediate: true, // 初始化时自动执行，加载默认行政区划树
    },
  },
  methods: {
    // 节点过滤方法（原逻辑不变）
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 3. 适配接口数据的树形结构转换（兼容pId: "0"的根节点）
    convertToTree(data) {
      const nodeMap = {};
      // 初始化所有节点：保留原始字段，添加label和children
      data.forEach((node) => {
        nodeMap[node.id] = {
          ...node,
          label: node.name, // 用接口返回的"name"作为树节点显示文本
          children: [],
        };
      });

      const tree = [];
      data.forEach((node) => {
        const currentNode = nodeMap[node.id];
        const parentNode = nodeMap[node.pId];

        if (parentNode) {
          // 有父节点：加入父节点的children数组
          parentNode.children.push(currentNode);
        } else {
          // 无父节点（pId: "0"）：作为根节点加入树
          tree.push(currentNode);
        }
      });
      return tree;
    },

    // 获取水源地树（原逻辑不变）
    getSydTree() {
      const query = {
        segmentType: "IsManual",
        dataType: "0",
      };
      return getRiverTree(query).then((res) => {
        if (res.code === 200) {
          this.deptOptions = this.convertToTree(res.data || []);
        }
      });
    },

    // 4. 获取行政区划树：返回Promise确保数据加载完成后执行全选
    getRiverRegin() {
      const query = {
        segmentTypeDrink: "show",
        segmentType: "IsManual",
      };
      return getDistrictTree(query).then((res) => {
        if (res.code === 200) {
          // 传入接口返回的行政区划数据，转换为树形结构
          this.deptOptions = this.convertToTree(res.data || []);
        }
      });
    },

    // 5. 核心：自动选中所有树节点
    selectAllNodes() {
      // 确保tree组件已渲染且有数据
      if (!this.$refs.tree || this.deptOptions.length === 0) return;

      // 递归收集所有节点的id（包括父级和子级）
      const getAllNodeIds = (nodes) => {
        let ids = [];
        nodes.forEach((node) => {
          ids.push(node.id); // 收集当前节点id
          if (node.children && node.children.length > 0) {
            ids = [...ids, ...getAllNodeIds(node.children)]; // 递归收集子节点id
          }
        });
        return ids;
      };

      // 获取所有节点id并调用tree的setChecked方法全选
      const allNodeIds = getAllNodeIds(this.deptOptions);
      this.$refs.tree.setCheckedKeys(allNodeIds);

      // 手动触发check事件，同步选中状态到父组件
      const checkedNodes = allNodeIds.map((id) => this.$refs.tree.getNode(id));
      this.handleCheck(checkedNodes, { checkedKeys: allNodeIds, checkedNodes });
    },

    // 点击节点事件（原逻辑不变）
    handleNodeClick(data, node) {
      // console.log("点击的节点数据：", data);
    },

    // 节点勾选状态变化事件（原逻辑不变）
    handleCheckChange(data, checked, indeterminate) {
      // console.log("节点数据：", data, "是否勾选：", checked);
    },

    // 节点勾选事件（原逻辑不变，同步选中id到父组件）
    handleCheck(selection, checkedKeys) {
      console.log("当前选中的节点数组：", selection);
      console.log("当前选中的节点ID数组：", checkedKeys.checkedKeys);
      const ids = checkedKeys.checkedKeys.join(",");
      this.$emit("node-click", ids);
    },
  },
};
</script>

<style></style>
